<template>
  <div class="leftDom">
    <div class="filter">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        clearable
      ></el-input>
    </div>
    <div class="section">
      <el-tree
        class="filter-tree"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        show-checkbox
        :filter-node-method="filterNode"
        ref="orgTreeRef"
        @check="handleCheck"
        default-expand-all
      ></el-tree>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.orgTreeRef.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      if (!data.name) return true;
      return data.name.indexOf(value) !== -1;
    },
    //处理出选中数据
    handleCheck(data, checked) {
      let checkedNodes = checked.checkedNodes;
      let pitchOnData = [];
      checkedNodes.forEach(node => {
        if(node.children == null){
          pitchOnData.push(node)
        }
      })
      this.$emit("pitchOnData", pitchOnData);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftDom {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;

  .filter {
    margin-bottom: 1em;
  }

  .section {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
